<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div,
        #box {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 50px;
            background: #abbcaa;
        }

        #box {
            top: 200px;
        }
    </style>
</head>

<body>
    <button id="btn0">0</button>
    <button id="btn1">1</button>
    <button id="btn2">2</button>
    <button id="btn3">3</button>
    <div id="div"></div>
    <div id="box"></div>

    <script>
        //按钮
        var btn0 = document.getElementById("btn0");
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var btn3 = document.getElementById("btn3");
        //盒子
        var div = document.getElementById("div");
        var box = document.getElementById("box");

        btn0.onclick = function () {
            animate(div, {
                width: 100,
                height: 100,
                left: 0,
                top: 50
            })
            animate(box, {
                width: 100,
                height: 100,
                left: 0,
                top: 200
            })
        }

        btn1.onclick = function () {
            animate(div, {
                width: 300,
                height: 300,
                left: 500
            }, function () {
                animate(div, {
                    width: 0,
                    height: 0,
                    left: 0
                }, function () {
                    animate(box, {
                        width: 300,
                        height: 300,
                        left: 500
                    }, function () {
                        animate(box, {
                            width: 0,
                            height: 0,
                            left: 0
                        }, function () {
                            animate(div, {
                                width: 150,
                                height: 150,
                            }, function () {
                                animate(div, {
                                    width: 110,
                                    height: 110
                                })
                            })
                            animate(box, {
                                width: 150,
                                height: 150,
                            }, function () {
                                animate(box, {
                                    width: 110,
                                    height: 110
                                })
                            })
                        })
                    })
                })
            })
        }

        btn2.onclick = function () {
            animate(div, {
                left: 300,
                top: 100
            }, function () {
                animate(div, {
                    left: 600,
                    top: 50
                })
            })
            animate(box, {
                left: 300,
                top: 100
            }, function () {
                animate(box, {
                    left: 600,
                    top: 200
                })
            })
        }

        //核心代码    obj:改变动态效果的对象  json:改变的值的对象  callback：回调函数
        function animate(obj, json, callback) {
            clearInterval(obj.clearA); //默认清除一次定时器
            obj.clearA = setInterval(function () { //给传入对象里加一个定时器
                var flag = true; //判断属性对象是否执行完毕
                //遍历传入的对象
                for (var attrs in json) {
                    //获取样式  获取动态效果的初始值
                    var current = parseInt(getStyle(obj, attrs)); // w:100  h:100  l:0  t:50/200

                    //步长        等同于target- leader
                    var leader = (json[attrs] - current) / 10;
                    leader = leader > 0 ? Math.ceil(leader) : Math.floor(leader);

                    obj.style[attrs] = current + leader + "px"; //实现动态效果


                    if (current != json[attrs]) {
                        flag = false;
                    }
                }
                if (flag) {
                    clearInterval(obj.clearA);
                    if (callback) {
                        callback(); //回调函数
                    }
                }
            }, 15)
        }

        //封装兼容ie和标准浏览器获取样式的方法
        function getStyle(obj, attr) {
            if (obj.currentstyle) {
                return obj.currentStyle[attr]
            } else {
                return window.getComputedStyle(obj, null)[attr]
            }
        }

    </script>
</body>

</html>